<template>
    <el-select class="search-select"
        v-model="option.value"
        filterable
        :multiple="multiple"
        :collapse-tags="multiple"
        :remote="remote"
        :remote-method="option.remoteMethod"
        size="small"
        @change="changeSelectSearchItem"
        @remove-tag="removeTagSelectSearchItem"
        :popper-class="option.popperClass"
        @visible-change="blurSearchItem(option, index, $event)">
        <el-option
            v-for="(item, index) in option.options"
            :value="item[option.optionValueKey]"
            :label="item[option.optionLabelKey]"
            :disabled="item.disabled"
            :key="index">
        </el-option>
    </el-select>
</template>

<script>
import normalMixin from "../mixin/normalMixin";
export default {
    name: "searchSelect",
    mixins: [normalMixin],
    computed: {
        multiple() {
            return this.option.multiple
        },
        remote() {
            return this.option.remote
        }
    },
    methods: {
        /**
         * change 事件处理
         * 多选模式下移除tag时触发
         * 移除的tag值
         */
        removeTagSelectSearchItem(value) {
            if (this.option.removeTagMethod) this.option.removeTagMethod(value); 
        },
        /**
         * Select组件change事件触发的事件
         * @param {String} value select返回数据组件绑定的key值
         */
        changeSelectSearchItem(value) {
            // 关联性
            if (this.option.closeRelevanceName) this.$emit('closeUse', this.option.closeRelevanceName);
            if (this.option.changeMethod) {
                let selectData = null;
                if (this.option.multiple) { // 多选模式
                    // 返回 [object Array] 数据类型 [ { optionLabelKey: val, optionValueKey: val } ]
                    selectData = this.option.options.filter(v => value.includes(v[this.option.optionValueKey]));
                } else { // 单选模式
                    // 返回 [object Object] 数据类型 { optionLabelKey: val, optionValueKey: val }
                    selectData = this.option.options.find(v => value === v[this.option.optionValueKey]);
                }
                this.option.changeMethod(selectData);
            }
        },
    }
}
</script>
